<script setup lang="ts">
import { api, api_url } from '@/api/api'
import { useParameterEditSId } from '@/stores/parameterEditSId'
import type { Parameter } from '@/types/ParameterType'
import type { ParaStandard } from '@/types/StandardType'
import { ElLoading } from 'element-plus'
import { ref, onBeforeMount } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()
const parameter = ref<Parameter>({
  name: '',
  emps: [],
  humanList: [],
  equipmentList: [],
  sample: {
    informationFile: '',
    photo: '',
    followStandard: true
  },
  sop: {
    file: '',
    followStandard: true
  },
  facilityList: [],
  compareValidList: [],
  simulation: {
    report: '',
    origin: '',
    followStandard: true
  },
  status: '',
  labAdmin: {
    username: '',
    type: ''
  }
})
const standard = ref<ParaStandard>({
  id: 0,
  sample: {
    informationFile: '',
    photo: '',
    followStandard: true
  },
  sop: {
    file: '',
    followStandard: true
  },
  simulation: {
    report: '',
    origin: '',
    followStandard: true
  }
})
const standardId = useParameterEditSId()

onBeforeMount(() => {
  let loading = ElLoading.service()
  api.getParameterById(parseInt(route.params.id.toString())).then((resp) => {
    parameter.value = resp
  })
  api.getParaStandard(standardId.id).then((resp) => {
    standard.value = resp
    loading.close()
  })
})

function toFile(x: string) {
  window.open(api_url + 'files/' + x)
}

function goBack() {
  router.push('/home/completedT')
}
</script>

<template>
  <div class="main">
    <h2 class="h2">查看项目</h2>
    <div class="info_main">
      <el-container
        ><el-header>
          <div class="sub">
            <el-page-header @back="goBack()">
              <template #content>
                <span class="text-large font-600 mr-3"> 编辑 </span>
              </template>
            </el-page-header>
          </div>
        </el-header>
      </el-container>
      <el-container>
        <el-main>
          <div class="submainbox">
            <div class="ry">
              <div class="title_sub">
                <span class="text_sub"> 人员 </span>
              </div>
              <el-table :data="parameter.humanList">
                <el-table-column type="index"></el-table-column>
                <el-table-column label="姓名" prop="information"></el-table-column>
                <el-table-column label="培训情况">
                  <template #default="scope">
                    <el-link
                      v-if="scope.row.trainFile != ''"
                      @click="toFile(scope.row.trainFile)"
                      >{{ scope.row.trainFile }}</el-link
                    >
                    <span v-else>无</span>
                  </template>
                </el-table-column>
                <el-table-column label="考核资料">
                  <template #default="scope">
                    <el-link
                      v-if="scope.row.examineFile != ''"
                      @click="toFile(scope.row.examineFile)"
                      >{{ scope.row.examineFile }}</el-link
                    >
                    <span v-else>无</span>
                  </template>
                </el-table-column>
                <el-table-column label="授权批准">
                  <template #default="scope">
                    <el-link
                      v-if="scope.row.authorizationFile != ''"
                      @click="toFile(scope.row.authorizationFile)"
                      >{{ scope.row.authorizationFile }}</el-link
                    >
                    <span v-else>无</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="sb">
              <div class="title_sub">
                <span class="text_sub"> 设备 </span>
              </div>
              <el-table :data="parameter?.equipmentList">
                <el-table-column type="index"></el-table-column>
                <el-table-column label="设备仪器编号" prop="equipNo"></el-table-column>
                <el-table-column label="名称" prop="name"></el-table-column>
                <el-table-column label="型号/规格/等级" prop="level"></el-table-column>
                <el-table-column label="测量范围" prop="scope"></el-table-column>
                <el-table-column label="设备购买年份" prop="addYear"></el-table-column>
                <el-table-column label="溯源方式" prop="traceMethod"></el-table-column>
                <el-table-column label="有效期截止至"></el-table-column>
                <el-table-column label="设备来源" prop="source"></el-table-column>
              </el-table>
            </div>
            <div class="yp">
              <div class="title_sub">
                <span class="text_sub"> 样品 </span>
              </div>
              <div v-if="parameter.sample.followStandard">当前为该标准通用样品</div>
              <div v-else>当前为本参数专用样品</div>
              <div style="display: flex">
                <div>样品信息一览表：</div>
                <el-link
                  v-if="parameter.sample.informationFile != '' && !parameter.sample.followStandard"
                  @click="toFile(parameter.sample.informationFile)"
                  >{{ parameter?.sample.informationFile }}</el-link
                >
                <el-link
                  v-else-if="
                    standard.sample.informationFile != '' && parameter.sample.followStandard
                  "
                  @click="toFile(standard.sample.informationFile)"
                  >{{ standard.sample.informationFile }}</el-link
                >
                <span v-else> 无文件 </span>
              </div>
              <div style="display: flex">
                <div>样品照片：</div>
                <el-link
                  v-if="parameter.sample.photo != '' && !parameter.sample.followStandard"
                  @click="toFile(parameter.sample.photo)"
                  >{{ parameter.sample.photo }}</el-link
                >
                <el-link
                  v-else-if="standard.sample.photo != '' && parameter.sample.followStandard"
                  @click="toFile(standard.sample.photo)"
                  >{{ standard.sample.photo }}</el-link
                >
                <span v-else> 无文件 </span>
              </div>
            </div>
            <div class="sop">
              <div class="title_sub">
                <span class="text_sub"> 检验细则(SOP) </span>
              </div>
              <div class="form_sop">
                <div v-if="parameter.sop.followStandard">当前为该标准通用SOP</div>
                <div v-else>当前为本参数专用SOP</div>
                <div style="display: flex">
                  <div>检验细则：</div>
                  <el-link
                    v-if="parameter.sop.file != '' && !parameter.sop.followStandard"
                    @click="toFile(parameter.sop.file)"
                    >{{ parameter.sop.file }}</el-link
                  >
                  <el-link
                    v-else-if="standard.sop.file != '' && parameter.sop.followStandard"
                    @click="toFile(standard.sop.file)"
                    >{{ standard.sop.file }}</el-link
                  >
                  <span v-else> 无文件 </span>
                </div>
              </div>
            </div>
            <div class="ss">
              <div class="title_sub">
                <span class="text_sub"> 设施 </span>
              </div>
              <el-table v-if="parameter.facilityList.length != 0" :data="parameter.facilityList">
                <el-table-column type="index"></el-table-column>
                <el-table-column label="要求名称" prop="name"></el-table-column>
                <el-table-column label="证明文件">
                  <template #default="scope">
                    <el-link v-if="scope.row.file != ''" @click="toFile(scope.row.file)">{{
                      scope.row.file
                    }}</el-link>
                    <span v-else>无</span>
                  </template>
                </el-table-column>
              </el-table>
              <div v-else>无特殊要求</div>
            </div>
            <div class="yz">
              <div class="title_sub">
                <span class="text_sub"> 比对验证 </span>
              </div>
              <el-table
                v-if="parameter.compareValidList.length != 0"
                :data="parameter.compareValidList"
              >
                <el-table-column type="index"></el-table-column>
                <el-table-column label="比对/验证结果">
                  <template #default="scope">
                    <el-link v-if="scope.row.file != ''" @click="toFile(scope.row.file)">{{
                      scope.row.file
                    }}</el-link>
                  </template>
                </el-table-column>
              </el-table>
              <div v-else>无特殊要求</div>
            </div>
            <div class="sy">
              <div class="title_sub">
                <span class="text_sub"> 模拟实验 </span>
              </div>
              <div class="form_sy">
                <div v-if="parameter.simulation.followStandard">当前为该标准通用模拟实验</div>
                <div v-else>当前为本参数专用模拟实验</div>
                <div style="display: flex">
                  <div>模拟实验报告：</div>
                  <el-link
                    v-if="parameter.simulation.report != '' && !parameter.simulation.followStandard"
                    @click="toFile(parameter.simulation.report)"
                    >{{ parameter.simulation.report }}</el-link
                  >
                  <el-link
                    v-else-if="
                      standard.simulation.report != '' && parameter.simulation.followStandard
                    "
                    @click="toFile(standard.simulation.report)"
                    >{{ standard.simulation.report }}</el-link
                  >
                  <span v-else> 无文件 </span>
                </div>
                <div style="display: flex">
                  <div>原始记录：</div>
                  <el-link
                    v-if="parameter.simulation.origin != '' && !parameter.simulation.followStandard"
                    @click="toFile(parameter.simulation.origin)"
                    >{{ parameter.simulation.origin }}</el-link
                  >
                  <el-link
                    v-else-if="
                      standard.simulation.origin != '' && parameter.simulation.followStandard
                    "
                    @click="toFile(standard.simulation.origin)"
                    >{{ standard.simulation.origin }}</el-link
                  >
                  <span v-else> 无文件 </span>
                </div>
              </div>
            </div>
          </div>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<style scoped>
.main {
  margin-bottom: 90px;
}

.h2 {
  margin-left: 50px;
  margin-top: 20px;
}

.info_main {
  width: 88%;
  height: 670px;
  border-width: 5px;
  margin-top: 30px;
  margin-left: 50px;
  box-shadow: 0px 0px 8px 1px lightgray;
  padding-top: 10px;
  padding-bottom: 40px;
  transition: 1s;
}

.sub {
  border-style: inset;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  padding-bottom: 10px;
}

.submainbox {
  margin-left: 30px;
  margin-right: 30px;
  height: 550px;
  overflow-y: auto;
}

.title_sub {
  border-style: inset;
  border-color: black;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  padding-bottom: 10px;
  margin-right: 50px;
  margin-bottom: 10px;
  margin-top: 10px;
}

.text_sub {
  font-size: 24px;
  font-weight: 800;
}
</style>
